//index.js
import CanvasDrag from '../../components/canvas-drag/canvas-drag';
Page({
    data: {
        graph: {},
        addText: '文本',
        showTextColorEdit: false,       // 打开文字颜色设置
        textColor: {                    // 文字颜色
            red: 0,
            green: 0,
            blue: 0,
            hex: '#000000'
        },
        showBackgroundColorEdit: false,       // 打开背景颜色设置
        backgroundColor: {                    // 文字颜色
            red: 0,
            green: 0,
            blue: 0,
            hex: '#000000'
        },
    },
    onLoad() {
        CanvasDrag.changeBgImage('../../assets/images/test.png')
    },

    onShow() {
        wx.setNavigationBarTitle({
          title: '心头鹿撞',
        })
    },

    onChangeTextRedColor(event) {
        let color = this.data.textColor
        color.red = event.detail
        color.hex = '#' + color.red.toString(16).toUpperCase() + color.green.toString(16).toUpperCase() + color.blue.toString(16).toUpperCase()
        this.setData({textColor: color})
    },

    onChangeTextGreenColor(event) {
        let color = this.data.textColor
        color.green = event.detail
        color.hex = '#' + color.red.toString(16).toUpperCase() + color.green.toString(16).toUpperCase() + color.blue.toString(16).toUpperCase()
        this.setData({textColor: color})
    },

    onChangeTextBlueColor(event) {
        let color = this.data.textColor
        color.blue = event.detail
        color.hex = '#' + color.red.toString(16).toUpperCase() + color.green.toString(16).toUpperCase() + color.blue.toString(16).toUpperCase()
        this.setData({textColor: color})
    },

    onChangeBackgroundRedColor(event) {
        let color = this.data.backgroundColor
        color.red = event.detail
        color.hex = '#' + color.red.toString(16).toUpperCase() + color.green.toString(16).toUpperCase() + color.blue.toString(16).toUpperCase()
        this.setData({backgroundColor: color})
    },

    onChangeBackgroundGreenColor(event) {
        let color = this.data.backgroundColor
        color.green = event.detail
        color.hex = '#' + color.red.toString(16).toUpperCase() + color.green.toString(16).toUpperCase() + color.blue.toString(16).toUpperCase()
        this.setData({backgroundColor: color})
    },

    onChangeBackgroundBlueColor(event) {
        let color = this.data.backgroundColor
        color.blue = event.detail
        color.hex = '#' + color.red.toString(16).toUpperCase() + color.green.toString(16).toUpperCase() + color.blue.toString(16).toUpperCase()
        this.setData({backgroundColor: color})
    },

    /**
     * 添加测试图片
     */
    onAddTest() {
        this.setData({
            graph: {
                w: 120,
                h: 120,
                type: 'image',
                url: '../../assets/images/test.png',
            }
        });
    },

    /**
     * 添加图片
     */
    onAddImage() {
        wx.chooseImage({
            success: (res) => {
                this.setData({
                    graph: {
                        w: 200,
                        h: 200,
                        type: 'image',
                        url: res.tempFilePaths[0],
                    }
                });
            }
        })
    },

    /**
     * 添加文本
     */
    onAddText() {
        this.setData({
            graph: {
                type: 'text',
                text: 'helloworld',
            }
        });
    },

    /**
     * 导出图片
     */
    onExport() {
        CanvasDrag.export()
            .then((filePath) => {
                console.log(filePath);
                wx.previewImage({
                    urls: [filePath]
                })
            })
            .catch((e) => {
                console.error(e);
            })
    },

    /**
     * 打开改变文字颜色弹框
     */
    onChangeTextColorOpen() {
        this.setData({showTextColorEdit: true})
        // CanvasDrag.changFontColor('#ffffff');
    },

    /**
     * 关闭改变文字颜色弹框
     */
    onChangeTextColorClose() {
        this.setData({showTextColorEdit: false})
    },

    /**
     * 改变文字颜色
     */
    onChangeTextColor() {
        CanvasDrag.changFontColor(this.data.textColor.hex);
        this.setData({showTextColorEdit: false})
    },

    /**
     * 打开改变背景颜色弹框
     */
    onChangeBackgroundColorOpen() {
        this.setData({showBackgroundColorEdit: true})
        // CanvasDrag.changFontColor('#ffffff');
    },

    /**
     * 关闭改变背景颜色弹框
     */
    onChangeBackgroundColorClose() {
        this.setData({showBackgroundColorEdit: false})
    },

    /**
     * 改变背景颜色
     */
    onChangeBackgroundColor() {
        CanvasDrag.changeBgColor(this.data.backgroundColor.hex);
        this.setData({showBackgroundColorEdit: false})
    },

    /**
     * 改变背景照片
     */
    onChangeBgImage() {
        wx.chooseImage({
            success: (res) => {
                CanvasDrag.changeBgImage(res.tempFilePaths[0])
            }
        })
    },
    //显示模块对话框
    showTIK: function () {
        this.setData({
            showModal: true
        })
    },
    //隐藏模块对话框
    hideModal: function () {
        this.setData({
            showModal: false
        });
    },
    // 对话框取消按钮点击事件
    onCancelEdit: function () {
        this.hideModal();
    },
    // 输入框内容改变事件
    inputChangeEdit: function (e) {
        this.setData({
            addText: e.detail.value
        })
    },
    //  对话框确认按钮点击事件
    onConfirmEdit: function () {
        var that = this
        this.setData({
            graph: {
                type: 'text',
                text: that.data.addText,
            },
            showModal: false,
        });
    },

})